<template>
  <div class="wrapper">
    <div class="editBox">
      <Toolbar
        class="too1bar"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        class="content"
        v-model="html"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
      />
    </div>
    <footer-tool-bar :is-mobile="isMobile" :collapsed="sideCollapsed">
      <a-button type="primary" @click="saveAdmit" :loading="loading" :disabled="html === htmlSave" >保存</a-button>
    </footer-tool-bar>
  </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import FooterToolBar from '@/components/FooterToolbar'
import { baseMixin } from '@/store/app-mixin'
import { getCommitmentLetter, addCommitmentLetter } from '@/api/admit'

export default {
  name: 'Admit',
  mixins: [baseMixin],
  components: {
    Editor,
    Toolbar,
    FooterToolBar
   },
  data () {
    return {
      editor: null,
      html: '',
      htmlSave: '',
      toolbarConfig: { },
      editorConfig: { placeholder: '请输入承诺书内容...' },
      mode: 'default', // or 'simple'
      loading: false
    }
  },
  created () {
  },
  mounted () {
    this.getData()
  },
  beforeDestroy () {
    if (this.editor == null) return
    this.editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    getData () {
      getCommitmentLetter().then(res => {
        this.html = res.commitmentLetter
        this.htmlSave = res.commitmentLetter
      })
    },
    onCreated (editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    saveAdmit () {
      addCommitmentLetter({
        commitmentLetter: this.html
      }).then(res => {
        this.htmlSave = this.html
        this.$message.success('承诺书保存成功')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  .editBox {
    border: 1px solid #ccc;
    .too1bar {
      border-bottom: 1px solid #ccc
    }
    .content {
      height: 700px; overflow-y: hidden;
    }
  }
}
</style>
